<template>
	<view class="wanl-filter" :style="{backgroundColor:backgroundColor}">
		<wanl-dropdown ref="uDropdown" @open="open" @close="close" active-color="#4CBD66" menu-icon="arrow-down-fill"
			menu-icon-size="14" inactive-color="#555555" title-size="28" :height="height">
			<wanl-dropdown-item v-model="districtId" title="区域" :options="district"></wanl-dropdown-item>
			<wanl-dropdown-item title="筛选">
				<view class="slot-content padding-lr" style="background-color: #FFFFFF;">
					<scroll-view scroll-y="true" style="height: 600rpx;">
						<view class="item" v-for="(item,index) in options" :key="index">
							<text class="title">{{item.title}}</text>
							<view class="list">
								<text :class="{cur:data.image == true}" @tap="choose(index,k)" v-for="(data,k) in item.list"
									:key="k">{{data.name}}</text>
							</view>
						</view>
					</scroll-view>
					<view class="btn">
						<view @click="closeDropdown">重置</view>
						<view @click="confirm">确定</view>
					</view>
				</view>
			</wanl-dropdown-item>
		</wanl-dropdown>
	</view>
</template>

<script>
	export default {
		name: "wanl-filter",
		props: {
			backgroundColor: {
				type: String,
				default: '#fff'
			},
			height: {
				type: String | Number,
				default: '80rpx'
			},
			district: {
				type: Array,
				default () {
					return []
				}
			}
		},
		data() {
			return {
				districtId: 0,
				options: []
			};
		},
		created() {
			this.getdatadict()
		},
		methods: {
			async getdatadict() {
				let url = '/addons/internethospital/api.index/datadict';
				//医院等级
				let res1 = await uni.request({url: url,method: 'POST',data: {datadict_id: '7'}});
				//医院类型
				let res2 = await uni.request({url: url,method: 'POST',data: {datadict_id: '16'}});
				//科室
				let res3 = await uni.request({url: '/addons/internethospital/api.hospital/section',method: 'POST'});
				console.log(res1 ,res2,res3)
				this.options = [
					{
						type: 'grade',
						title: '医院等级',
						list: res1[1].data
					},
					{
						type: 'nature',
						title: '医院性质',
						list: [{id: 1,name: '公立',image: ''},{id: 2,name: '非公立',image: ''}]
					},
					{
						type: 'type',
						title: '医院类型',
						list: res2[1].data
					},
					{
						type: 'sections',
						title: '科室',
						list: res3[1].data
					}
				]
			},
			choose(index, k) {
				// this.options = []
				this.$nextTick(() => {
					if(this.options[index].list[k].image == true) {
						this.options[index].list[k].image = false;
					} else {
						this.options[index].list[k].image = true
					}
				})
			},
			open(index) {
				// 展开某个下来菜单时，先关闭原来的其他菜单的高亮
				// 同时内部会自动给当前展开项进行高亮
				this.$refs.uDropdown.highlight();
			},
			close(index) {
				// 关闭的时候，给当前项加上高亮
				// 当然，您也可以通过监听dropdown-item的@change事件进行处理
				let options = JSON.parse(JSON.stringify(this.options));
				let t = this.searchFilter(options)
				this.$emit('submit',this.districtId,options)
				this.$refs.uDropdown.highlight(index);
			},
			change() {
				// 更多的细节，如有需要请自行根据业务逻辑进行处理
				// this.$refs.uDropdown.highlight(xxx);
			},
			closeDropdown() {
				this.$refs.uDropdown.close();
			},
			confirm() {
				this.$refs.uDropdown.close();
			},
			searchFilter(list, key) {
				for (let i = list.length - 1; i >= 0; i--) {
					let item = list[i]
					if (item.list && Array.isArray(item.list) && item.list.length > 0) {
						this.searchFilter(item.list, key, i, list);
					} else {
						if (item.image != true) {
							list.splice(i, 1)
						}
					}
				}
			}
		}
	}
</script>

<style lang="less" scoped>
	/deep/.u-dropdown__content {
		height: 80vh !important;
	}

	/deep/.u-dropdown__menu__item {
		&:last-child {
			.u-icon__icon {
				&::before {
					font-family: "iconfont" !important;
					font-size: 20rpx !important;
					font-style: normal;
					-webkit-font-smoothing: antialiased;
					-moz-osx-font-smoothing: grayscale;
					content: "\e6b7" !important;
				}
			}

			.u-dropdown__menu__item__arrow.u-dropdown__menu__item__arrow--rotate {
				transform: none;
			}
		}
	}

	.slot-content {
		border-top: 1rpx solid rgba(182, 182, 182, 0.5);

		scroll-view {
			.item {
				.title {
					font-size: 30rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 500;
					color: #333333;
					line-height: 42rpx;
					margin-bottom: 14rpx;
					margin-top: 20rpx;
					display: inline-block;
				}

				.list {
					display: flex;
					justify-content: flex-start;
					flex-wrap: wrap;

					text {
						padding: 0 40rpx;
						height: 56rpx;
						background: #F4F4F4;
						border-radius: 28rpx;
						font-size: 30rpx;
						font-family: PingFang SC-Medium, PingFang SC;
						font-weight: 500;
						color: #555555;
						line-height: 56rpx;
						margin-right: 20rpx;
						margin-bottom: 20rpx;

						&.cur {
							color: #4CBD66;
						}
					}
				}
			}
		}

		.btn {
			border-top: 1rpx solid rgba(182, 182, 182, 0.5);
			height: 100rpx;
			display: flex;
			justify-content: center;
			align-items: center;

			view {
				width: 300rpx;
				height: 72rpx;
				border-radius: 36rpx;
				border: 1px solid #777777;
				text-align: center;
				line-height: 72rpx;

				&:nth-child(1) {
					margin-right: 37rpx;
					font-size: 32rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 500;
					color: #666666;
				}

				&:nth-child(2) {
					border: none;
					width: 300rpx;
					height: 72rpx;
					background: #4CBD66;
					border-radius: 36rpx 36rpx 36rpx 36rpx;
					opacity: 1;
					color: #fff;
					font-size: 32rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 500;
					color: #FFFFFF;
				}
			}
		}
	}
</style>